<script setup lang="ts">
import { getRoles } from '@/api/roles';
import type { RolesCondition, RolesResult } from '@/api/roles';
import { useToggle } from '@vueuse/core';
import { timeFormatter } from '@/utils/dayjs'

// Vueuse加载效果、危险提示
const [isLoading, toggleLoading] = useToggle(false);

// 查询条件初始化
const rolesCondition = reactive<RolesCondition>({
    name: '',
    size: 5
})

// 查询结果初始化
const rolesData = ref<RolesResult>({
    records: [],
    size: 0,
    total: 0,
    pages: 0
})


// 查询角色列表
async function fetchData(params: RolesCondition = {}) {
    toggleLoading(true)
    Object.assign(rolesCondition, params)
    const { data } = await getRoles(rolesCondition);
    if (data.code === '000000') {
        rolesData.value = data.data;
    } else {
        ElMessage.error('获取角色管理失败');
        throw new Error('获取角色管理失败');
    }
    toggleLoading(false)
}

onMounted(fetchData)
</script>

<template>
    <div class="roles-index">
        <div class="roles-header">
            <div class="roles-header-search">
                <ElInput v-model="rolesCondition.name" :disabled="isLoading" />
                <ElButton size="large" :disabled="isLoading" @click="rolesCondition.name = ''">重置</ElButton>
                <ElButton type="primary" size="large" :disabled="isLoading">查询</ElButton>
            </div>
            <ElButton type="info" size="large" :disabled="isLoading">添加角色</ElButton>
        </div>
        <el-divider>
            <el-icon><el-icon-star-filled /></el-icon>
        </el-divider>
        <div v-loading="isLoading">
            <el-table :data="rolesData.records" border style="width: 100%;">
                <el-table-column type="index" label="序号" align="center" />
                <el-table-column prop="name" label="角色名称" align="center" />
                <el-table-column prop="description" label="描述" align="center" />
                <el-table-column prop="createdTime" label="创建时间" :formatter="timeFormatter" align="center" />
                <el-table-column label="操作" align="center">
                    <template #default>
                        <el-button type="primary">编辑</el-button>
                        <el-button type="danger">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div><el-pagination :total="50" border /></div>
    </div>
</template>

<style scoped lang="scss">
.roles-index {
    gap: 0.25rem;
    // background-color: rgb(255, 255, 255);
    padding: 0.5rem;
}

.roles-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.roles-header-search {
    display: flex;
}
</style>
